<template>
	<view class="view-content">
		<view class="form-content">
			<i v-for="(item,index) of keys" :key="index" @click="keyTap(item)" class="key" 
			:class="{'key--gray':item.moreClass,'bottom-key-height':index>=9}">{{item.txt}}</i>
		</view>
	</view>
</template>

<script>
	export default {
		name: "zm-keyboard-number",
		props: {},

		data: function() {
			return {
				keys: [{
						txt: 1,
						key: 1
					},
					{
						txt: 2,
						key: 2
					},
					{
						txt: 3,
						key: 3
					},
					{
						txt: 4,
						key: 4
					},
					{
						txt: 5,
						key: 5
					},
					{
						txt: 6,
						key: 6
					},
					{
						txt: 7,
						key: 7
					},
					{
						txt: 8,
						key: 8
					},
					{
						txt: 9,
						key: 9
					},
					{
						txt: '',
						key: '',
						moreClass: 'key--gray key--extra'
					},
					{
						txt: 0,
						key: 0
					},
					{
						txt: '删除',
						key: 'del',
						moreClass: 'key--gray key--delete'
					}
				],
			}
		},

		computed: {

		},
		methods: {
			keyTap(item) {
				if (item.key == 'del') {
					this.$emit('del', item);
				} else if (/\d/.test(item.key)) {
					this.$emit('keyinput', item);
				}
			}
		},

	}
</script>

<style lang="scss" scoped>
	.view-content {
		position: fixed;
		background: #ffffff;
		bottom: 0;
		width: 100%;
		left: 0;
		
		.form-content {
			position: relative;
			box-sizing: border-box;
		
			.key {
				display: inline-block;
				width: 33.33333333%;
				height: 100rpx;
				font-size: 40rpx;
				font-style: normal;
				line-height: 100rpx;
				text-align: center;
				vertical-align: middle;
				position: relative;
				outline: none;
		
				&.key--gray {
					background-color: #ebedf0;
					font-size: 30rpx;
				}
		
				&.key--active {
					background-color: #f2f3f5;
				}
			}
		
			.key::after {
				position: absolute;
				box-sizing: border-box;
				content: ' ';
				pointer-events: none;
				top: -50%;
				right: -50%;
				bottom: -50%;
				left: -50%;
				border: 0 solid #ebedf0;
				-webkit-transform: scale(0.5);
				transform: scale(0.5);
				border-width: 0.02667rem 0.02667rem 0 0;
			}
			
			.bottom-key-height {
				height: calc(100rpx + constant(safe-area-inset-bottom));
				height: calc(100rpx + env(safe-area-inset-bottom));
				line-height: calc(100rpx + constant(safe-area-inset-bottom));
				line-height: calc(100rpx + env(safe-area-inset-bottom));
			}
		}
	}
</style>
